<template>
  <div class="dj_transfer">
    <div class="dj_transfer_panel">
      <div class="dj_transfer_panel_header">
        <el-input size="small" @input="leftSearch" v-model="leftVal" :clearable="true" prefix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
      </div>
      <div class="dj_transfer_panel_body">
        <el-checkbox-group v-show="left_list.length" class="dj_transfer_panel_list" v-model="check_left_list">
          <el-checkbox :disabled="item.disabled||disabled" class="dj_transfer_panel_item" v-for="item in left_list" :label="item.id" :key="item.id">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
        <p v-show="!all_left_list.length" class="dj_transfer_panel_empty">无数据</p>
        <p v-show="all_left_list.length&&!left_list.length" class="dj_transfer_panel_empty">无匹配数据</p>
      </div>
      <div class="dj_transfer_panel_footer">
        <el-checkbox :disabled="!left_list.length||disabled||leftAllDisabled" :indeterminate="leftIndeterminate" @change="leftAllCheck" label="全选" v-model="leftAll"></el-checkbox>
        <span class="left_total">{{left_count}}/{{left_total}}</span>
      </div>
    </div>
    <div class="dj_transfer_btn">
      <el-button @click="moveRight" :disabled="!right_count||rightBtnDis||disabled" type="primary">&lt; 移除</el-button>
      <el-button @click="moveLeft" :disabled="!left_count||leftBtnDis||disabled" type="primary">添加 &gt;</el-button>
    </div>
    <div class="dj_transfer_panel">
      <div class="dj_transfer_panel_header">
        <el-input size="small" @input="rightSearch" v-model="rightVal" :clearable="true" prefix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
      </div>
      <div class="dj_transfer_panel_body">
        <el-checkbox-group v-show="right_list.length" class="dj_transfer_panel_list" v-model="check_right_list">
          <el-checkbox :disabled="item.disabled||disabled" class="dj_transfer_panel_item" v-for="item in right_list" :label="item.id" :key="item.id">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
        <p v-show="!all_right_list.length" class="dj_transfer_panel_empty">无数据</p>
        <p v-show="all_right_list.length&&!right_list.length" class="dj_transfer_panel_empty">无匹配数据</p>
      </div>
      <div class="dj_transfer_panel_footer">
        <el-checkbox :disabled="!right_list.length||disabled||rightAllDisabled" :indeterminate="rightIndeterminate" @change="rightAllCheck" label="全选" v-model="rightAll"></el-checkbox>
        <span class="left_total">{{right_count}}/{{right_total}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "djTransfer",
  props: {
    value: {
      type: Array,
      default: function() {
        return [];
      }
    },
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    disabled:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      all_list: [],
      value_list: [],
      all_left_list: [],
      leftVal: "",
      left_list: [],
      check_left_list: [],
      leftAll: false,
      leftIndeterminate: false,
      all_right_list: [],
      rightVal: "",
      right_list: [],
      check_right_list: [],
      rightAll: false,
      rightIndeterminate: false,
      rightBtnDis: false,
      leftBtnDis: false
    };
  },
  methods: {
    initData() {
      let list = JSON.parse(JSON.stringify(this.data));
      this.all_list = list;
      this.all_left_list = JSON.parse(JSON.stringify(list));
      this.left_list = JSON.parse(JSON.stringify(list));
    },
    changeRight() {
      let rightData = [];
      let list = JSON.parse(JSON.stringify(this.all_list));
      this.value_list.forEach(val => {
        for (let i in list) {
          if (list[i].id == val) {
            rightData.push(list.splice(i, 1)[0]);
          }
        }
      });
      this.all_left_list = list;
      this.all_right_list = rightData;
      this.leftSearch(this.leftVal);
      this.rightSearch(this.rightVal);
    },
    leftSearch(val) {
      if (!val) {
        this.left_list = JSON.parse(JSON.stringify(this.all_left_list));
        return;
      }
      let list = this.all_left_list.filter(item => item.name.indexOf(val) >= 0);
      this.left_list = list;
    },
    rightSearch(val) {
      if (!val) {
        this.right_list = JSON.parse(JSON.stringify(this.all_right_list));
        return;
      }
      let list = this.all_right_list.filter(
        item => item.name.indexOf(val) >= 0
      );
      this.right_list = list;
    },
    leftAllCheck(val) {
      if (val) {
        this.left_list.forEach(val => {
          if(!val.disabled){
            if (!this.check_left_list.length) {
              this.check_left_list.push(val.id);
            } else {
              for (let i in this.check_left_list) {
                if (this.check_left_list.findIndex(item => item == val.id) < 0) {
                  this.check_left_list.push(val.id);
                  break;
                }
              }
            }
          }
        });
      } else {
        this.left_list.forEach(val => {
          for (let i in this.check_left_list) {
            if (this.check_left_list[i] == val.id) {
              this.check_left_list.splice(i, 1);
              break;
            }
          }
        });
      }
    },
    rightAllCheck(val) {
      if (val) {
        this.right_list.forEach(val => {
          if(!val.disabled){
            if (!this.check_right_list.length) {
              this.check_right_list.push(val.id);
            } else {
              for (let i in this.check_right_list) {
                if (this.check_right_list.findIndex(item => item == val.id) < 0) {
                  this.check_right_list.push(val.id);
                  break;
                }
              }
            }
          }
        });
      } else {
        this.right_list.forEach(val => {
          for (let i in this.check_right_list) {
            if (this.check_right_list[i] == val.id) {
              this.check_right_list.splice(i, 1);
              break;
            }
          }
        });
      }
    },
    checkAll(allList, list) {
      let count = 0;
      list.forEach(val => {
        allList.forEach(item => {
          if (item.id == val) {
            count++;
          }
        });
      });
      return count;
    },
    moveLeft() {
      let moveData = [];
      this.check_left_list.forEach(val => {
        for (let i in this.all_left_list) {
          if (this.all_left_list[i].id == val) {
            moveData.push(...this.all_left_list.splice(i, 1));
          }
        }
      });
      this.all_right_list.push(...moveData);
      this.check_left_list = [];
      this.leftSearch(this.leftVal);
      this.rightSearch(this.rightVal);
    },
    moveRight() {
      let moveData = [];
      this.check_right_list.forEach(val => {
        for (let i in this.all_right_list) {
          if (this.all_right_list[i].id == val) {
            moveData.push(...this.all_right_list.splice(i, 1));
          }
        }
      });
      this.all_left_list.push(...moveData);
      this.check_right_list = [];
      this.leftSearch(this.leftVal);
      this.rightSearch(this.rightVal);
    }
  },
  computed: {
    left_total() {
      return this.all_left_list.length;
    },
    left_count() {
      return this.check_left_list.length;
    },
    checkAllLeft() {
      return this.left_count + this.left_list.length;
    },
    right_total() {
      return this.all_right_list.length;
    },
    right_count() {
      return this.check_right_list.length;
    },
    checkAllRight() {
      return this.right_count + this.right_list.length;
    },
    leftAllDisabled(){
      return this.left_list.length==this.left_list.filter(val=>val.disabled==true).length;
    },
    rightAllDisabled(){
      return this.right_list.length==this.right_list.filter(val=>val.disabled==true).length;
    }
    // disabledCount(){
    //   let count=0;

    // }
  },
  watch: {
    data: {
      handler(val) {
        this.initData();
        this.changeRight();
      },
      deep: true
    },
    value(val) {
      this.value_list = val;
      this.changeRight();
    },
    checkAllLeft() {
      if (
        this.left_count &&
        this.left_list.length ===
          this.checkAll(this.left_list, this.check_left_list)
      ) {
        this.leftIndeterminate = false;
        this.leftAll = true;
      } else if (this.checkAll(this.left_list, this.check_left_list) == 0) {
        this.leftIndeterminate = false;
        this.leftAll = false;
      } else {
        this.leftIndeterminate = true;
      }
    },
    checkAllRight() {
      if (
        this.right_count &&
        this.right_list.length ===
          this.checkAll(this.right_list, this.check_right_list)
      ) {
        this.rightIndeterminate = false;
        this.rightAll = true;
      } else if (this.checkAll(this.right_list, this.check_right_list) == 0) {
        this.rightIndeterminate = false;
        this.rightAll = false;
      } else {
        this.rightIndeterminate = true;
      }
    },
    right_total() {
      let data = [];
      this.all_right_list.forEach(val => data.push(val.id));
      this.$emit("input", data);
    },
    disabled(val){
      if(val){
        this.check_left_list=[];
        this.check_right_list=[];
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dj_transfer {
  .dj_transfer_panel {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 400px;
    height: 500px;
    // max-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    .dj_transfer_panel_header {
      margin: 15px;
    }
    .dj_transfer_panel_list {
      margin: 0;
      padding: 6px 0;
      list-style: none;
      height: 380px;
      overflow: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .dj_transfer_panel_item {
        display: block;
        margin: 10px 15px;
      }
    }
    .dj_transfer_panel_empty {
      margin: 0;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      padding: 6px 15px 0;
      color: #909399;
      text-align: center;
    }
    .dj_transfer_panel_footer {
      position: absolute;
      bottom: 0;
      height: 40px;
      width: 100%;
      line-height: 40px;
      background: #f5f7fa;
      margin: 0;
      padding-left: 15px;
      border-bottom: 1px solid #ebeef5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #000;
      .left_total {
        font-size: 12px;
        color: #909399;
        position: absolute;
        right: 15px;
      }
    }
  }
  .dj_transfer_btn {
    display: inline-block;
    vertical-align: middle;
    padding: 0 30px;
    button {
      margin: 0;
    }
    button:first-child {
      margin-bottom: 10px;
      display: block;
    }
  }
}
</style>